<template>
	<div class="comp-alert">
		<mu-alert :color="colorType" @delete="toggle = false" delete v-if="toggle" transition="mu-scale-transition">
			<mu-icon left :value="iconType"></mu-icon>{{content}}
		</mu-alert>
	</div>
</template>

<script>
export default {
	// 属性数据
	props: {
		// 弹框显示开关
		toggle: {
			default: false
		},
		// 弹框颜色
		colorType: {
			default: 'success'
		},
		// 弹框左侧图标样式
		iconType: {
			default: 'success'
		},
		// 显示文本
		content: {
			default: '成功'
		}
	}
};
</script>

<style lang="less">
.comp-alert {
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 10000;
	> .mu-alert {
		padding: 0;
		display: flex;
		justify-content: space-between;
		.mu-icon {
			margin-left: 1rem;
			margin-right: 0;
		}
		.mu-icon-button {
			margin-right: 1rem;
			margin-left: 0;
		}
		&:last-child {
			margin-bottom: 0;
		}
	}
	> .mu-button {
		margin: 0 auto;
		display: block;
	}
}

.mu-scale-transition-enter-active,
.mu-scale-transition-leave-active {
	transition: transform .45s cubic-bezier(0.23, 1, 0.32, 1), opacity .45s cubic-bezier(0.23, 1, 0.32, 1);
	backface-visibility: hidden;
}

.mu-scale-transition-enter,
.mu-scale-transition-leave-active {
	transform: scale(0);
	opacity: 0;
}
</style>